<template>
    <div>
        <mt-header fixed title="新闻" ></mt-header>
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom"  ref="loadmore">
        <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">

            <li v-for="(item,index) in lists">
                
                <mt-cell :title="item.title">
                    <!-- <span v-html="item.content">
                    </span>  -->
                    <router-link :to="'/newsdetal/'+index" class="link">新闻详情</router-link>
                    <img slot="icon"  v-lazy="'http://localhost:3000/'+item.pic.filename" width="50" height="50">
                </mt-cell>
            </li>
    
        </ul>
        </mt-loadmore>
    </div>
</template>
<script>
import {mapGetters,mapMutations,mapActions} from 'vuex';
export default {
  data(){
      return{
          page:1
      }
  },
  computed:{
			...mapGetters(['lists']),
        },
  methods:{
        //   ...mapMutations(['checkLists']),
          ...mapActions(['checkLists']),
    
      loadMore() {
            this.loading = true;
           
            setTimeout(() => {
               this.page+=1;
              
                this.checkLists(this.page);
                this.loading = false;
            }, 500);
        },
        loadTop() {
      
        this.$refs.loadmore.onTopLoaded();
        },
        loadBottom() {
       
        this.allLoaded = true;// if all data are loaded
        this.$refs.loadmore.onBottomLoaded();
        }
  },
  created () {
       this.checkLists(1);
    //    console.log(this.lists);
  },
  mounted () {
    //  console.log( this.lists);
  }
}
</script>


<style>
    ul{
        margin-top:40px;
    }
    .link{
       margin-left:80px;
       color:black;
       text-decoration: none; 
    }
    img{
        margin-right:40px;
    }
    
</style>